<template>
  <div>
    <el-card class="box-card" style="margin-left: 20px">
      <div class="conment">
        <el-row>
          <el-col>
            <p class="head">话题作者</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div>
              <el-image
                style="width: 100%; height: 100%"
                :src="author_info.header_pic"
                fit="cover"
              ></el-image>
            </div>
          </el-col>
          <el-col :span="13">
            <p class="author_name">{{ author_info.username }}</p>
          </el-col>
          <el-col :span="5">
            <div v-if="attention">
              <el-button type="primary" size="mini" @click="attentionUser()">
                <i class="el-icon-check"></i>
                已关注
              </el-button>
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="attentionUser()">
                <i class="el-icon-plus"></i>
                关注
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <span class="self_sign"
            >个性签名：{{
              author_info.self_sign
                ? author_info.self_sign
                : '这个人很懒，什么都没写！'
            }}</span
          >
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前点击话题的id
      id: this.$route.params.id,
      author_info: {},
      attention: null,
      user_id: JSON.parse(sessionStorage.getItem('user')).user_id
    }
  },
  created () {
    this.getAuthorInfo()
    this.isAttention()
  },
  methods: {
    // 获取话题作者信息
    async getAuthorInfo () {
      const { data: res } = await this.$http.get('/get_topic_author?id=' + this.id)
      this.author_info = res
    },
    // 关注作者
    async attentionUser () {
      if (this.user_id === this.author_info.user_id) {
        return this.$message.info('无法关注自己！')
      }
      const { data: res } = await this.$http.put('/user_attention', { user_id: this.user_id, attention_user_id: this.author_info.user_id })
      if (res.status === 200) {
        this.$message.success('关注成功！')
      } else {
        this.$message.info('取消关注成功！')
      }
      // 页面刷新
      this.$router.push('/topic/' + this.$route.params.id + '?params=' + Math.random())
    },
    // 判断用户是否已经关注
    async isAttention () {
      const { data: res } = await this.$http.post('/user_attention', { userId: this.user_id })
      for (let i = 0; i < res.length; i++) {
        if (res[i].user_id === this.author_info.user_id) {
          this.attention = true
          break
        } else {
          this.attention = false
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 25px;
  border-bottom: 1px solid #ebeef5;
}

.author_name {
  margin: 0;
  line-height: 51px;
  margin-left: 15px;
  font-size: 20px;
}

.el-image {
  border-radius: 50%;
}

.self_sign {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}

.el-button {
  margin-top: 15px;
}
</style>
